<template>
	<view class="page">

		<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:up="upOption">
			<!-- sticky吸顶悬浮的菜单, 父元素必须是 mescroll -->
			<view class="sticky-box top-search-box">
				<uni-forms ref="baseForm" :modelValue="searchForm">
					<uni-forms-item label="楼号" required>
						<uni-easyinput v-model="searchForm.buildingNo" placeholder="请输入楼号" />
					</uni-forms-item>
					<uni-forms-item label="单元">
						<uni-easyinput v-model="searchForm.unit" placeholder="请输入单元" />
					</uni-forms-item>
					<uni-forms-item label="楼层">
						<uni-easyinput v-model="searchForm.floor" placeholder="请输入楼层" />
					</uni-forms-item>
					<uni-forms-item label="门牌">
						<uni-easyinput v-model="searchForm.door" placeholder="请输入门牌" />
					</uni-forms-item>
					<uni-forms-item label="">
						<view class="search-button" @click="searchAction">搜索</view>
					</uni-forms-item>
				</uni-forms>
			</view>

			<view class="list-wrap">
				<view class="list-item" v-for="(item,index) in list" :key="index" @click="itemClick(item)">
					<view class="list-item__title">
						{{ item.buildingNo }}号楼-{{ item.unit }}单元-{{ item.floor }}层-{{ item.door }}门
					</view>
					<view class="list-item__content">
						<view class="list-item__content__text">
							楼栋地址：{{ item.address }}
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {
		listBuilding
	} from '@/api/housing/index'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				searchText: '',
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 30 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无数据'
					}
				},
				list: [],
				searchForm:{
					
				}
			}
		},
		beforeMount() {
			if (!this.$store.getters.housing) {
				this.$tab.navigateBack()
			}
		},
		created() {

		},
		methods: {
			searchAction(e) {
				this.downCallback()
			},
			/*上拉加载的回调*/
			upCallback(page) {
				let pageNum = page.num;
				let pageSize = page.size;
				const params = {
					pageNum: pageNum,
					pageSize: pageSize,
					housingId: this.$store.getters.housing.housingId,
				}
				const final = Object.assign(params,this.searchForm)
				this.$modal.loading("查询中")
				listBuilding(final).then((result) => {
					if (pageNum == 1) this.list = [];
					this.list = this.list.concat(result.rows || [])
					this.mescroll.endBySize(result.rows.length, result.total);
				}).catch(() => {
					this.mescroll.endErr();
				}).finally(() => this.$modal.closeLoading())

			},
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			itemClick(item) {
				uni.$emit('device-select-door',item)
				this.$tab.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		.sticky-box {
			z-index: 990;
			position: sticky;
			top: var(--window-top);
			background-color: #fff;
			box-sizing: border-box;
		}
		.top-search-box {
			box-sizing: border-box;
			padding-left: 20rpx;
			padding-right: 20rpx;
			&::v-deep .uni-forms-item {
				margin-bottom: 8rpx !important;
			}
			.search-button {
				margin-top: 10rpx;
				margin-bottom: 40rpx;
				background-color: $uni-color-primary;
				color: #FFF;
				text-align: center;
				line-height: 70rpx;
			}
		}

		.list-wrap {
			box-sizing: border-box;
			padding-top: 20rpx;
			padding-left: 20rpx;
			padding-right: 20rpx;

			.list-item {
				color: #333;
				background-color: #FFF;
				padding: 20rpx 30rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				overflow: hidden;
				margin-bottom: 20rpx;
				position: relative;

				.button-box {
					position: absolute;
					right: 20rpx;
					bottom: 20rpx;
				}

				&__time {
					font-size: 28rpx;
				}

				&__content {
					position: relative;
					padding-top: 20rpx;

					&__text {
						font-size: 26rpx;
						color: #999;
					}
				}
			}
		}
	}
</style>